{include admin.inc.header}

{include admin.inc.top}

<div class="container-fluid content-body">
	<div class="main">
		{include admin.inc.menu}

		<section class="right-section" id="right-section">
			<!-- start of inner-frame -->
			<div class="inner-iframe">
				<ul class="breadcrumb">
					<li>
					<i class="glyphicon glyphicon-home"></i>
					<span>当前位置：</span>
					<a href="javascript:void(0);">首页</a>
					</li>
				</ul>

				<!-- Nav tabs -->

				<div class="inner-container">

					<!--analytic start here-->
					<div class="row">
						<div class="analytic">
							<div class="analttic-right">
								<div class="graph-grid">
									<!--graph-->
									<link rel="stylesheet" href="/res/styles/graph.css">
									<script src="http://bootstrap.cn/themes/mbw1017-7/js/jquery.flot.min.js"></script>
									<!--//graph-->
									<!-- Graph HTML -->
									<div id="graph-wrapper">
										<div class="graph-container">
											<div id="graph-lines"> </div>
											<div id="graph-bars"> </div>
										</div>
									</div>
									<!-- end Graph HTML -->
								</div>
							</div>
						</div>
					</div>
							
					<div class="row">
					<div class="analytic-bottom col-xs-3">
						<ul>
							<li><h3><a href="#">￥{expr number_format($week_sale,2)}</a></h3><p> 本周销售额</p></li>
							<li><h3><a href="#">￥{expr number_format($mon_sale,2)}</a></h3><p> 本月销售额</p></li>
							<li><h3><a href="#">￥{expr number_format($sale,2)}</a></h3><p> 总销售额</p></li>
						</ul>
					</div>
					<div class="analytic-bottom col-xs-3">
						<ul>
							<li><h3><a href="#">{expr number_format($week_order)}</a></h3><p>本周订单量</p></li>
							<li><h3><a href="#">{expr number_format($mon_order)}</a></h3><p>本月订单量</p></li>
							<li><h3><a href="#">{expr number_format($order)}</a></h3><p>总订单量</p></li>
						</ul>
					</div>
					<div class="analytic-bottom col-xs-3">
						<ul>
							<li><h3><a href="#">{expr number_format($week_member)}</a></h3><p>本周新增会员</p></li>
							<li><h3><a href="#">{expr number_format($mon_member)}</a></h3><p>本月新增会员</p></li>
							<li><h3><a href="#">{expr number_format($member)}</a></h3><p>总会员</p></li>
						</ul>
					</div>
					<div class="analytic-bottom col-xs-3">
						<ul>
							<li><h3><a href="#">{expr number_format($productTotal)}</a></h3><p>商品数</p></li>
							<li><h3><a href="#">{expr number_format($saleWeight,3)}</a></h3><p>销售量({$pro_unit})</p></li>
							<li><h3><a href="#">{expr number_format($totalWeight,3)}</a></h3><p>库存({$pro_unit})</p></li>
						</ul>
					</div>
					</div>

					<!--    -------------    -->
								<!--//graph-->
			</div><!-- end of inner -->

		</section>

	</div>
</div>

{include admin.inc.footer}

<script>
	seajs.use("user", function(exports) {
		exports.editor();
		exports.upload({
			datas : ["/res/upload/2016/09/1474894071-267284.jpg",
				"/res/upload/2016/09/1474894084-227191.jpg",
				"/res/upload/2016/09/1474894088-187560.jpg",
				"/res/upload/2016/09/1474894091-463185.jpg"]
		});
	});
</script>
<script>
$(document).ready(function () {

	// Graph Data ##############################################
	var graphData = [{
				// Returning Visits
		data: [ [6, 4500], [7,3500], [8, 6550], [9, 7600], [10, 4500], [11,3500], [12, 6550], [13, 7600], [14, 4500], [15,3500], [16, 6550], [17, 7600], ],
		color: '#59676B',
		points: { radius: 8, fillColor: '#59676B' }
	}
	];

	// Lines Graph #############################################
	$.plot($('#graph-lines'), graphData, {
		series: {
			points: {
				show: true,
				radius: 1
			},
			lines: {
				show: true
			},
			shadowSize: 0
		},
		grid: {
			color: '#59676B',
			borderColor: 'transparent',
			borderWidth: 10,
			hoverable: true
		},
		xaxis: {
			tickColor: 'transparent',
			tickDecimals: false
		},
		yaxis: {
			tickSize: 1200
		}
	});

// Bars Graph ##############################################
	$.plot($('#graph-bars'), graphData, {
		series: {
			bars: {
				show: true,
				barWidth: .9,
				align: 'center'
			},
			shadowSize: 0
		},
		grid: {
			color: '#fff',
			borderColor: 'transparent',
			borderWidth: 20,
			hoverable: true
		},
		xaxis: {
			tickColor: 'transparent',
			tickDecimals: 2
		},
		yaxis: {
			tickSize: 1000
		}
	});

// Graph Toggle ############################################
$('#graph-bars').hide();

$('#lines').on('click', function (e) {
	$('#bars').removeClass('active');
	$('#graph-bars').fadeOut();
	$(this).addClass('active');
	$('#graph-lines').fadeIn();
	e.preventDefault();
});

$('#bars').on('click', function (e) {
	$('#lines').removeClass('active');
	$('#graph-lines').fadeOut();
	$(this).addClass('active');
	$('#graph-bars').fadeIn().removeClass('hidden');
	e.preventDefault();
});

// Tooltip #################################################
function showTooltip(x, y, contents) {
	$('<div id="tooltip">' + contents + '</div>').css({
		top: y - 16,
		left: x + 20
	}).appendTo('body').fadeIn();
}

var previousPoint = null;

$('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
	if (item) {
		if (previousPoint != item.dataIndex) {
			previousPoint = item.dataIndex;
			$('#tooltip').remove();
			var x = item.datapoint[0],
			y = item.datapoint[1];
			showTooltip(item.pageX, item.pageY, y+ x );
		}
	} else {
		$('#tooltip').remove();
		previousPoint = null;
	}
});

});
</script>
</body>
</html>
